<template>
  <div class="index dis-f jc-sb">
    <div class="w-500">
      <con-box class="h-180" title="产量">
        <div class="box-content">
          <img src="@/assets/images/yyjx_icon_cl.png" alt="" class="production-img" />
          <template>
            <div class="production-item" v-for="item in productionList" :key="item.label">
              <div class="label">{{ item.label }}</div>
              <div class="count font-num">{{ clObj[item.key] }}</div>
            </div>
          </template>
        </div>
      </con-box>
      <con-box class="h-250 mt-10" title="千包能耗">
        <div class="box-content">
          <div class="energy-production">
            <img src="@/assets/images/qbnh.png" alt="" />
            <div class="top scale">{{ clObj.production }}</div>
            <div class="bottom">千包产量</div>
          </div>
          <data-list-no-line :list="energyList" />
        </div>
      </con-box>
      <con-box class="h-178 mt-10" title="成品库位利用率">
        <div class="box-content">
          <div class="left">
            <bar-progress title="成品库位利用率" :progress="clObj.libraryRate" />
          </div>
          <div class="finished-right dis-f">
            <div class="item" v-for="item in finishedList" :key="item.label">
              <div class="value">{{ clObj[item.key] }}</div>
              <div class="label">{{ item.label }}</div>
            </div>
          </div>
        </div>
      </con-box>
      <con-box class="h-250 mt-10" title="七日成品库存">
        <stripe-bar-chart :xAxisData="cpXData" :barData="cpYData" />
      </con-box>
    </div>
    <div class="flex-1 pl-10 pr-10 dis-f fd-c jc-sb flex-wrap-wrap">
      <div class="pl-60 pr-60 h-60 dis-f ai-c jc-sb po-r t--20">
        <div v-for="(item, index) in centerArr" :key="index" class="flex-1 ta-c">
          <p class="fz-24 fw-700" :style="{ color: item.color }">{{ personObj[item.key] }}</p>
          <span class="fz-14 c-fff">{{ item.name }}</span>
        </div>
      </div>
      <!-- <con-box class="h-302 w-100p" title="成品库龄预警">
        <div class="pt-20 table p-20">
          <div class="th fz-14 c-BDE1FF dis-f jc-sb h-48 ai-c ta-c mb-4">
            <div class="td w-80">序号</div>
            <div class="td flex-1">名称</div>
            <div class="td w-100">种类</div>
            <div class="td w-100">当日入库</div>
            <div class="td w-100">当日出库</div>
            <div class="td w-100">现库存</div>
            <div class="td w-100">在库时间</div>
          </div>
          <base-seamless-scroll>
            <div class="list-con">
              <div v-for="(item, index) in warnList" :key="index" class="tr dis-f jc-sb h-48 ai-c mb-4">
                <div class="w-80 td">
                  <span class="w-20 h-20 dis-f ai-c jc-c fz-14 m-0-auto c-FF7F0E no-num">{{ index + 1 }}</span>
                </div>
                <div class="td flex-1 ta-c">{{ item.name }}</div>
                <div class="td w-100 ta-c">{{ item.category }}</div>
                <div class="td w-100 ta-c">{{ item.inNumber }}</div>
                <div class="td w-100 ta-c">{{ item.outNumber }}</div>
                <div class="td w-100 ta-c">{{ item.inventory }}</div>
                <div class="td w-100 ta-c c-0091FF">{{ item.instockTime }}</div>
              </div>
            </div>
          </base-seamless-scroll>
        </div>
      </con-box> -->
    </div>
    <div class="w-500">
      <con-box class="h-165" title="产能利用率">
        <div class="box-content">
          <img src="@/assets/images/yyjx_icon_cn.png" alt="" class="production-img" />
          <template>
            <div class="production-item" v-for="item in productionUseList" :key="item.label">
              <div class="label">{{ item.label }}</div>
              <div class="count font-num">{{ clObj[item.key] }}</div>
            </div>
          </template>
        </div>
      </con-box>
      <con-box class="h-212 mt-10" title="成品库存数量">
        <base-echarts :options="finishedOptions" />
      </con-box>
      <con-box class="h-236 mt-10" title="当日发货看单情况">
        <div class="box-content">
          <div class="goods-production">
            <img src="@/assets/images/yyjx_icon_fhwcl.png" alt="" />
            <div class="top scale">{{ clObj.lookOrderRate }}%</div>
            <div class="bottom">发货完成率</div>
          </div>
          <data-list-no-line :list="sendGoodsList" margin="mb-10" backgroundColor="green" />
        </div>
      </con-box>
      <con-box class="h-246 mt-10" title="千包能耗">

        <base-echarts :options="consumeOptions" />
        <div style="display: flex;" slot="header">
          <!-- <base-select v-model="gySelected1" :list="selectList1" /> -->
          <base-select v-model="gySelected" :list="selectList" />
        </div>
      </con-box>
    </div>
  </div>
</template>

<script>
// iui
import BaseSeamlessScroll from "@/components/BaseSeamlessScroll.vue";
import * as echarts from "echarts";
import ConBox from "@/components/ConBox.vue";
import StripeBarChart from "@/components/StripeBarChart.vue";
import BaseEcharts from "@/components/BaseEcharts.vue";
import { scatterIcon } from "@/assets/js/constant";
import DataListNoLine from "@/components/DataListNoLine.vue";
import BarProgress from "@/components/BarProgress.vue";
import { operatePersonnel, operateTarget, operateStockage, operateThousand, operatePinventory } from "@/api/apis";
import BaseSelect from "@/components/BaseSelect.vue";
import { nowSize } from "@/utils/nowSize";
import mixins from "@/mixins/refresh";
let colorList = ["#FF7B00", "#FF7B00", "#FF7B00"];
let result = [
  { name: "当日入库数量", value: 0 },
  { name: "当日出库数量", value: 0 },
  { name: "当日现存数量", value: 0 },
];
import { getSevenDays, getRangeRandom, getRangeRandomFloor } from "@/utils/tools"

export default {
  name: "index",
  components: {
    ConBox,
    StripeBarChart,
    BaseEcharts,
    DataListNoLine,
    BarProgress,
    BaseSelect,
    BaseSeamlessScroll,
  },
  mixins: [mixins],
  data() {
    return {
      // 产能利用率
      productionUseList: [
        { label: "当日产能利用率", key: "utilizationDay" },
        { label: "月累数据产能利用率", key: "utilizationMonth" },
      ],
      // 产量
      productionList: [
        { label: "当日实际产量(千箱)", key: "productionDay" },
        { label: "月产量(千箱)", key: "productionMonth" },
        { label: "年度产量(万箱)", key: "productionYear" },
      ],
      // 千包能耗
      energyList: [
        { label: "水耗", value: "0", unit: "KG/千包" },
        { label: "电耗", value: "0", unit: "度/千包" },
        { label: "汽耗", value: "0", unit: "公斤/千包" },
      ],
      // 成品库位利用率
      finishedList: [
        { label: "库位总数", key: "library" },
        { label: "已用库位", key: "libraryUsed" },
      ],
      // 当日发货看单情况
      sendGoodsList: [
        { label: "计划看单总数", key: "lookOrderPlan", value: 0 },
        { label: "已发", key: "lookOrderIssued", value: 0 },
        { label: "未发", key: "lookOrderNotsent", value: 0 },
      ],
      consumeOptions: {
        grid: {
          top: "18%",
          bottom: "18%",
        },
        tooltip: {
          show: true,
          trigger: "axis",
          backgroundColor: "rgba(0,0,0,.9)",
          textStyle: {
            color: "#fff",
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [],
          axisTick: {
            show: true,
          },
          axisLabel: {
            textStyle: {
              color: "#FEFEFE",
              fontSize: 12,
              fontFamily: "Microsoft YaHei",
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: "#203044",
            },
          },
        },
        yAxis: {
          name: "单位：%",
          nameTextStyle: {
            align: "center",
            color: "#fff",
            fontSize: 12,
            fontFamily: "Microsoft YaHei",
          },
          type: "value",
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#263649",
              width: 1,
              type: "dashed",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#FFFFFF",
              fontSize: 12,
              fontFamily: "Microsoft YaHei",
            },
          },
        },
        series: [
          {
            name: "千包能耗",
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 0,
            data: [],
            lineStyle: {
              color: "#FFDE36",
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(255,222,54,0.45)",
                    },
                    {
                      offset: 1,
                      color: "transparent",
                    },
                  ],
                  false,
                ),
              },
            },
          },
        ],
      },
      finishedOptions: {
        color: colorList,
        tooltip: {
          show: false,
        },
        legend: {
          show: false,
        },
        grid: {
          left: "10%",
          right: "20%",
          top: "10%",
          bottom: "10%",
        },
        xAxis: {
          splitLine: {
            show: false,
          },
          type: "value",
          show: false,
        },
        yAxis: [
          {
            show: true,
            inverse: true,
            data: result.map((item) => item.name),
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              inside: true,
              color: "#bde1ff",
              fontSize: nowSize(16),
              padding: [0, 0, 8, -10],
              align: "left",
              verticalAlign: "bottom",
            },
          },
          {
            show: true,
            inverse: true,
            data: result.map((item) => item.value),
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              margin: -45,
              interval: 0,
              inside: true,
              color: "#fff",
              fontSize: nowSize(18),
              align: "right",
              verticalAlign: "center",
              fontFamily: "Microsoft YaHei",
            },
          },
        ],
        series: [
          {
            name: "",
            type: "bar",
            barWidth: nowSize(4),
            barGap: nowSize(26),
            showBackground: true,
            data: result.map((item, index) => {
              return {
                name: item.name,
                value: item.value,
                itemStyle: {
                  borderRadius: 2,
                  color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "#0F1F45",
                      },
                      {
                        offset: 1,
                        color: colorList[index],
                      },
                    ],
                  },
                },
              };
            }),
          },
          {
            name: "",
            type: "scatter",
            emphasis: {
              scale: false,
            },
            symbol:
              "image://",
            symbolSize: 60,
            symbolOffset: [0, -5],
            z: 2,
            data: result,
            animationDelay: 500,
          },
          {
            type: "lines",
            coordinateSystem: "cartesian2d",
            zlevel: 10,
            data: [],
            effect: {
              show: true,
              period: 2.5,
              symbolSize: nowSize(4),
              loop: true,
              color: "#fff", //流光颜色
            },
          },
        ],
      },
      // fui
      gySelected: "recordDate",
      selectList: [
        { label: "年", value: "year" },
        { label: "月", value: "month" },
        { label: "日", value: "recordDate" },
      ],
      gySelected1: "1",
      selectList1: [
        { label: "蒸汽", value: "1" },
        { label: "电", value: "2" },
        { label: "水", value: "3" },
      ],
      personObj: {},
      warnList: [],
      cpXData: [],
      cpYData: [],
      clObj: {},
      centerArr: [
        {
          key: "totalNumber",
          name: "总人数",
          color: "#FFD517",
        },
        {
          key: "clerkNumber",
          name: "职员",
          color: "#17FFF1",
        },
        {
          key: "securityStaffNumber",
          name: "自聘作业员",
          color: "#FFD517",
        },
        {
          key: "outsourceNumber",
          name: "外包",
          color: "#06E382",
        },
        {
          key: "entryNumber",
          name: "司机",
          color: "#17FFF1",
        },
        {
          key: "departNumber",
          name: "访客",
          color: "#2B9EE3",
        },
      ],
      query: {},
      time1: null,
      time2: null,

    };
  },
  computed: {},
  watch: {
    gySelected(newV, oldV) {
      if (newV === oldV) return;
      const label = this.selectList.find((item) => item.value === newV).label;
      this.operateThousand(label, newV);
    },
    gySelected1(newV, oldV) {
      if (newV === oldV) return;
      const label = this.selectList1.find((item) => item.value === newV).label;
      this.operateThousand(label);
    },
  },
  created() {
    // 获取query参数
    this.query = this.$route.query;
    this.init();
  },
  methods: {
    // hui
    init() {
      this.operateTarget();
      this.operatePinventory();
      this.operateStockage();
      this.operateThousand("日", "recordDate");
      this.operatePersonnel();
    },

    /**
     * 查询人效
     * @param name 描述信息
     */
    async operatePersonnel() {
      // let { code, data } =
      //   (await operatePersonnel({
      //     factoryName: this.query.factoryName,
      //   }).catch((err) => {
      //     err;
      //   })) || {};

      const code = 200, data = {
        "createBy": null,
        "createTime": null,
        "updateBy": null,
        "updateTime": "2023-10-13 11:57:12",
        "remark": null,
        "id": 1,
        "factoryName": "杭州顶益工厂",
        "workshopName": null,
        "lineName": null,
        "totalNumber": 1576,
        "clerkNumber": 278,
        "securityStaffNumber": 875,
        "outsourceNumber": 368,
        "entryNumber": 32,
        "departNumber": 23
      };
      if (code === 200) {
        this.personObj = data;
      }
    },

    /**
     * 千包能耗
     * @param name 描述信息
     */
    async operateThousand(type, typeValue) {
      // let { code, data } =
      //   (await operateThousand({
      //     factoryName: this.query.factoryName,
      //     type,
      //   }).catch((err) => {
      //     err;
      //   })) || {};
      const date = new Date();
      const month = (index) => {
        const num = date.getMonth() + 1 - (6 - index);
        const month = num > 0 ? num : 12 + num;
        return `${date.getFullYear()}/${month < 10 ? '0' + month : month}`
      }
      const dates = getSevenDays();
      const data = dates.map((item, index) => {
        let thousandPacks = getRangeRandomFloor(141.6, 145.8);
        if (type == '水') {
          thousandPacks = getRangeRandomFloor(190.7, 286.1);
        } else if (type == '电') {
          thousandPacks = getRangeRandomFloor(23.8, 24.8);
        } else if (type == '蒸汽') {
          thousandPacks = getRangeRandomFloor(141.6, 145.8);
        }

        return {
          "createBy": null,
          "createTime": null,
          "updateBy": null,
          "updateTime": null,
          "remark": null,
          "id": index,
          "factoryName": "杭州顶益工厂",
          "workshopName": null,
          "lineName": null,
          "type": "日",
          "recordDate": item,
          "month": month(index),
          "year": date.getFullYear() - (6 - index),
          "thousandPacks": thousandPacks,
        }
      })

      this.consumeOptions.series[0].data = data.map((item) => item.thousandPacks);
      if (typeValue) this.consumeOptions.xAxis.data = data.map((item) => item[typeValue]);
    },

    /**
     * 成品库龄预警
     * @param name 描述信息
     */
    async operateStockage() {
      // let { code, data } =
      //   (await operateStockage({
      //     factoryName: this.query.factoryName,
      //     size: 30,
      //   }).catch((err) => {
      //     err;
      //   })) || {};

      const code = 200, data = [
        {
          "createBy": null,
          "createTime": "2023-10-10 16:19:13",
          "updateBy": null,
          "updateTime": "2023-10-13 00:37:21",
          "remark": null,
          "id": 12,
          "factoryName": "杭州顶益工厂",
          "workshopName": null,
          "lineName": null,
          "name": "红烧牛肉面",
          "category": "即食",
          "inNumber": "10000",
          "outNumber": "6000",
          "inventory": "4000",
          "instockTime": "20h"
        },
        {
          "createBy": null,
          "createTime": null,
          "updateBy": null,
          "updateTime": "2023-10-13 00:37:45",
          "remark": null,
          "id": 2,
          "factoryName": "杭州顶益工厂",
          "workshopName": null,
          "lineName": null,
          "name": "泡菜牛肉面",
          "category": "冲泡",
          "inNumber": "20000",
          "outNumber": "12000",
          "inventory": "8000",
          "instockTime": "15h"
        },
        {
          "createBy": null,
          "createTime": null,
          "updateBy": null,
          "updateTime": "2023-10-13 00:38:07",
          "remark": null,
          "id": 3,
          "factoryName": "杭州顶益工厂",
          "workshopName": null,
          "lineName": null,
          "name": "老坛酸菜面",
          "category": "煮",
          "inNumber": "15000",
          "outNumber": "8000",
          "inventory": "7000",
          "instockTime": "30h"
        },
        {
          "createBy": null,
          "createTime": null,
          "updateBy": null,
          "updateTime": "2023-10-13 00:40:58",
          "remark": null,
          "id": 4,
          "factoryName": "杭州顶益工厂",
          "workshopName": null,
          "lineName": null,
          "name": "泡菜牛肉面",
          "category": "即食",
          "inNumber": "5000",
          "outNumber": "4000",
          "inventory": "1000",
          "instockTime": "20h"
        }
      ];
      if (code === 200) {
        this.warnList = data;
      }
    },

    /**
     * 七日成品库存
     * @param name 描述信息
     */
    async operatePinventory() {
      // let { code, data } =
      //   (await operatePinventory({
      //     factoryName: this.query.factoryName,
      //   }).catch((err) => {
      //     err;
      //   })) || {};
      const code = 200;
      const date = getSevenDays();
      const data = date.map((item, index) => {
        return {
          "createBy": null,
          "createTime": item + " 23:44:28",
          "updateBy": null,
          "updateTime": item + " 00:35:48",
          "remark": null,
          "id": index,
          "factoryName": "杭州顶益工厂",
          "workshopName": null,
          "lineName": null,
          "recordDate": item,
          "inventory": getRangeRandomFloor(122, 126, 2)
        }
      })

      if (code === 200) {
        this.cpXData = data.map((item) => item.recordDate);
        this.cpYData = data.map((item) => item.inventory);
      }
    },

    /**
     * 查询产量
     * @param name 描述信息
     */
    async operateTarget() {
      // let { code, data } =
      //   (await operateTarget({ factoryName: this.query.factoryName }).catch((err) => {
      //     err;
      //   })) || {};
      const code = 200, data = {
        "createBy": null,
        "createTime": "2023-09-30 21:14:15",
        "updateBy": null,
        "updateTime": "2023-10-19 15:01:09",
        "remark": null,
        "id": 4,
        "factoryName": "杭州顶益工厂",
        "workshopName": null,
        "lineName": null,
        "library": "21690",
        "libraryUsed": "17853",
        "libraryRate": "82.3",
        "waterConsumption": "286.6",
        "powerConsumption": "23.8",
        "steamConsumption": "141.6",
        "production": "92371",
        "inNumber": "321",
        "outNumber": "234",
        "inventory": "509",
        "lookOrderPlan": "254681",
        "lookOrderIssued": "135453",
        "lookOrderNotsent": "119228",
        "lookOrderRate": "46.81",
        "productionDay": Math.floor(Math.random() * (350 - 300 + 1)) + 300,
        "productionMonth": 6946,
        "productionYear": "7832",
        "utilizationDay": "73%",
        "utilizationMonth": "75%"
      };
      if (code === 200) {
        this.clObj = data;
        this.energyList[0].value = data.waterConsumption;
        this.energyList[1].value = data.powerConsumption;
        this.energyList[2].value = data.steamConsumption;

        if (this.time1) clearInterval(this.time1);
        if (this.time2) clearInterval(this.time2);

        const fun1 = () => {
          const num = getRangeRandom(300, 350);
          this.$set(this.clObj, 'productionDay', num);
          this.$set(this.clObj, 'productionMonth', num * (new Date().getDate()))
        }
        fun1();
        const fun2 = () => {
          const num = getRangeRandomFloor(141.6, 145.8);
          const num1 = getRangeRandomFloor(23.8, 24.8);
          const num2 = getRangeRandomFloor(190.7, 286.1);

          this.energyList[0].value = num;
          this.energyList[1].value = num1;
          this.energyList[2].value = num2;
        }
        fun2();

        this.time1 = setInterval(() => { fun1(); }, 1000 * 60 * 5);
        this.time2 = setInterval(() => { fun2(); }, 1000 * 60 * 3);

        // 成品库存数量
        let arr = ["inNumber", "outNumber", "inventory"];
        this.finishedOptions.yAxis[1].data = [data.inNumber, data.outNumber, data.inventory];
        this.finishedOptions.series[1].data = [data.inNumber, data.outNumber, data.inventory];
        this.finishedOptions.series[2].data = this.finishedOptions.series[1].data.map((item, index) => {
          return {
            coords: [
              [0, index],
              [item - 4, index],
            ],
          };
        });
        this.finishedOptions.series[0].data = result.map((item, index) => {
          return {
            name: item.name,
            value: this.clObj[arr[index]],
            itemStyle: {
              borderRadius: 2,
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#0F1F45",
                  },
                  {
                    offset: 1,
                    color: colorList[index],
                  },
                ],
              },
            },
          };
        });
        // 当日发货看单情况
        this.sendGoodsList.forEach((item) => {
          item.value = this.clObj[item.key];
        });

        //
      }
    },
  },
  beforeDestroy() {
    clearInterval(this.time1);
    clearInterval(this.time2);
  }
};
</script>

<style scoped lang="scss">
// jui
.box-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;

  .production-img {
    margin-right: 20px;
    width: 90px;
  }

  .production-item {
    position: relative;
    padding: 0 18px;

    &:not(:last-child)::after {
      position: absolute;
      content: "";
      top: 50%;
      transform: translateY(-50%);
      right: 0;
      width: 1px;
      height: 34px;
      background: #90e5ef;
      opacity: 0.2;
    }

    .label {
      margin-bottom: 8px;
      font-size: 12px;
      font-family: Microsoft YaHei;
      color: #ffffff;
    }

    .count {
      font-size: 20px;
      font-weight: bold;
      font-style: italic;
      color: #ffffff;
      line-height: 25px;
      // background: linear-gradient(0deg, #ffffff 65.234375%, #14a9ff 100%);
      // -webkit-background-clip: text;
      // -webkit-text-fill-color: transparent;
    }
  }

  .energy-production,
  .goods-production {
    position: relative;
    z-index: 999;
    margin-right: 53px;

    .top {
      width: 100px;
      height: 88px;
      background-size: 100%;
      text-align: center;
      font-size: 18px;
      font-weight: bold;
      line-height: 57px;
    }

    .bottom {
      text-align: center;
      font-size: 14px;
    }

    img {
      position: absolute;
      width: 100%;
    }
  }

  .finished-right {
    .item {
      position: relative;
      padding: 0 20px;
      text-align: center;

      &:nth-child(1)::after {
        position: absolute;
        content: "";
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        width: 1px;
        height: 43px;
        background: linear-gradient(244deg, rgba(42, 67, 86, 0) 0%, rgba(42, 67, 86, 1) 50%, rgba(42, 67, 86, 0) 100%);
      }
    }

    .value {
      margin-bottom: 4px;
      font-size: 18px;
    }

    .label {
      font-size: 14px;
      color: #7bbff2;
    }
  }

  .left {
    margin-top: -14px;
  }
}

.table,
.dev {
  height: calc(100% - 60px);
}

.th {
  background-color: #142835;
}

.no-num {
  border: 1px solid #ec954c;
  background-color: rgba(255, 127, 14, 0.35);
}

.font-num {
  font-weight: bold;
  font-style: italic;
  background-image: -webkit-linear-gradient(top, #ffffff, #14a9ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>
